// 导入路由
import { BrowserRouter, Routes, Route } from 'react-router-dom'
// 导入路由权限校验组件
import { AuthRoute } from '@/components/AuthRoute'

// 导入页面组件
import Login from '@/pages/Login'
import Layout from '@/pages/Layout'

// 导入页面
import Home from '@/pages/Home'
import Article from '@/pages/Article'
import Publish from '@/pages/Publish'
import NoMatch from '@/pages/NoMatch'

// 配置路由规则
function App () {
  return (
    <BrowserRouter>
      <div className='App'>
        <Routes>
          <Route
            path='/home'
            element={
              <AuthRoute>
                <Layout />
              </AuthRoute>
            }
          ></Route>
          <Route path='/login' element={<Login />}></Route>
          <Route
            exact
            path='/'
            element={
              <AuthRoute>
                {' '}
                <Layout />{' '}
              </AuthRoute>
            }
          >
            <Route
              path='/home/'
              element={
                <AuthRoute>
                  <Home />
                </AuthRoute>
              }
            />
            <Route
              path='/home/article'
              element={
                <AuthRoute>
                  <Article />
                </AuthRoute>
              }
            />
            <Route
              path='/home/publish'
              element={
                <AuthRoute>
                  <Publish />
                </AuthRoute>
              }
            />
            <Route
              path='/home/publish/:id'
              element={
                <AuthRoute>
                  <Publish />
                </AuthRoute>
              }
            />
            <Route path='*' element={<NoMatch />} />
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  )
}

export default App
